/**
 * 组件的公共 mixins
 * 提供：
 * 组件数据源的数据获取；
 * 组件交互事件的绑定
 */
import dataSources from '../../dataSource/index.js';
import actionMgr from '../../action/actionMgr.js';

export default {
  props: {
    pageParams: { //页面的参数
      type: Object
    },
    mode_: { //模式，编辑页面时-edit，展示页面时-view
      type: String,
      default: 'edit',
    },
    globalData: { //全局数据源获得的数据
      type: Object
    }
  },
  data() {
    return {
      dataLoader: null,
      intervalFlag: null,
      queryParams: {}, //组件查询数据的参数
      eventListeners_: [], //组件注册的监听事件
      loading: false, //组件（如按钮）是否正在加载数据中/处理中
    }
  },
  computed: {
    //数据源配置
    dataSourcesConfig() {
      return this.val.dataSource;
    },
    enableQueryData() {
      return this.mode_ === 'view';
    },
    componentWidth() {
      const w = this.val.w;
      const reg = /^\d+$/g;
      if (w && reg.test(w)) {
        return w + 'px';
      }
      return w;
    },
    componentHeight() {
      const h = this.val.h;
      const reg = /^\d+$/g;
      if (h && reg.test(h)) {
        return h + 'px';
      }
      return h;
    }
  },
  mounted() {
    //如果组件更新了新属性，合并进去
    if (this.setting) {
      Object.assign(this.val, Object.assign(this.setting, this.val));
    }

    if (this.mode_ === 'view') {
      // console.log('mixins mounted ' + this.val.uuid);
      this.initLoadData();
      this.initActions();
    }
  },
  beforeDestroy() {
    //组件销毁前要停止定时任务
    console.log('before widget destroy');
    if (this.intervalFlag) {
      clearInterval(this.intervalFlag);
      this.intervalFlag = null;
    }
    if (this.dataLoader && this.dataLoader.destroy) {
      this.dataLoader.destroy(this);
    }
    //移除绑定的事件
    this.removeActions();
  },
  methods: {

    /**
     * 初始化数据获取
     * 每个组件自己管理自己的数据获取
     */
    initLoadData() {
      const ds = this.dataSourcesConfig;
      if (!ds) {
        return;
      }
      // 获取数据源对应的loader
      this.dataLoader = dataSources.getLoaderByName(ds.name);
      // 获取数据
      this.queryData(false);

      // 定时刷新数据
      if (ds.useRefresh && ds.refreshInterval) {
        this.intervalFlag = setInterval(() => {
          this.queryData(false);
        }, ds.refreshInterval * 1000);
      }
    },
    /**
     * 初始化事件绑定
     */
    initActions() {
      const actions = this.val.actions;
      if (!actions) {
        return;
      }
      // console.log('initActions', this.val.uuid, actions, actions.length);
      const params = Object.assign(this.pageParams, this.queryParams);
      this.eventListeners_ = actions.map(action => {
        return {
          event: action.event,
          func: () => {
            actionMgr.doAction(this, action, params);
          }
        }
      });
      this.removeActions();
      this.eventListeners_.forEach(item => {
        this.$el.addEventListener(item.event, item.func)
      })

    },
    removeActions() {
      if (this.eventListeners_) {
        this.eventListeners_.forEach(item => {
          this.$el.removeEventListener(item.event, item.func)
        })
      }

    },


    // 提供方法，组件可以主动操作获取数据
    queryData(showMessage = true) {
      if (this.dataLoader) {
        // console.log('this.pageParams', this.pageParams)
        const params = Object.assign(this.pageParams, this.queryParams);
        this.dataLoader.loadData(this.dataSourcesConfig, params, (data, data2) => {
          // console.log('updateData', data, data2);
          // 回调组件的更新数据方法，每个组件内部自行实现具体如何更新
          this.updateData(data, data2);
          // 数据保存到全局data中，可以在其他组件使用
          // console.log('this=============', this, this.$el);

          if (data && showMessage) {
            this.$notify({
              title: '消息',
              message: '数据更新成功',
              type: 'success'
            });
          }

        }, this);
      }
    },

    showLoading() {
      this.loading = true;
    },
    hideLoading() {
      this.loading = false;
    }
  }
}
